<template>
	<div class="name">
		<div class="nameTop">
			<div class="nameTopLeft">
				<img @click="back" src="../../../../../assets/images/后退.png" />
				<span>歌单名称</span>
			</div>
			<span @click="save">保存</span>
		</div>
		<div class="inputBox">
			<div class="inputbox">
				<input type="text" v-model="num" placeholder="编辑歌单名称" name="" id="_input" value="" />
				<img @click="del" src="../../../../../assets/images/删除／数字面板编辑态.png" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "name",
		data() {
			return {
				num: "",
				arr:""
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			del() {
				$("#_input")[0].value = ""
				this.num = ""
			},
			save() {
				console.log(this.arr.id)
				console.log(this.num)
//				this.$http.get("/playlist/update", {
//					params: {
//						id : this.arr.id,
//						name: this.num,
//						desc: "hahaha",
//						tags: "日语"
//					}
//				}).then(res=>{
//					console.log(res)
//				}).catch(() => {
//					console.log("更新歌单名错误")
//				})
				this.$router.push({
					name: 'createedit',
					params: {
						num: this.num
					}
				})
			}
		},
		created() {
			this.arr = this.$route.params.arr
		}
	}
</script>

<style lang="scss">
	@import "~@/assets/css/common.scss";
	.name {
		.nameTop {
			padding: vw(10) vw(20) vw(10) vw(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.nameTopLeft {
				font-size: 0;
				display: flex;
				align-items: center;
				img {
					width: vw(22);
					height: vw(22);
				}
				span {
					font-size: vw(16);
					line-height: vw(16);
					color: #5a5a5a;
					margin-left: vw(10);
				}
			}
			span {
				font-size: vw(16);
				line-height: vw(16);
				color: #5a5a5a;
			}
		}
		.inputBox {
			padding: 0 vw(18);
			height: vw(50);
			.inputbox {
				height: 100%;
				border-bottom: 1px solid #e0e0e0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				img {
					width: vw(23);
					height: vw(23);
				}
				input {
					margin-left: vw(4);
					height: vw(20);
					border: none;
					font-size: vw(16);
					line-height: vw(16);
					width: vw(250);
				}
				input::-webkit-input-placeholder {
					color: #e0e0e0;
				}
				input::-moz-placeholder {
					/* Mozilla Firefox 19+ */
					color: #e0e0e0;
				}
				input:-moz-placeholder {
					/* Mozilla Firefox 4 to 18 */
					color: #e0e0e0;
				}
				input:-ms-input-placeholder {
					/* Internet Explorer 10-11 */
					color: #e0e0e0;
				}
			}
		}
	}
</style>